<template>
	<view>
		<view class="header">
			<image src="https://baiban-1255494067.cos.ap-nanjing.myqcloud.com/attach/2021/07/da302202107211445079562.png" mode=""></image>
		</view>
		<view class="apply">
			<view class="title">填写申请信息</view>
			<input type="text" v-model="realname" placeholder="姓名" placeholder-style="color:#929292" />
			<input type="text" v-model="mobile" placeholder="手机号" />
			<view class="apply-submit" @click="service">申请成为团长</view>
		</view>
	</view>
</template>

<script>
	import {
		qrcode_become_service
	} from '@/api/user.js';
	export default {
		data() {
			return {
				realname: '',
				mobile: '',
				qrcode: ''
			}
		},
		onLoad(options) {
			var self = this;
			self.qrcode = options.qrcode;
		},
		methods: {
			service() {
				let self = this;
				if (!self.realname) return self.$util.Tips({
					title: '请输入姓名！'
				});
				if (!self.mobile) return self.$util.Tips({
					title: '请输入手机号！'
				});
				if (!(/^1(3|4|5|7|8|9|6)\d{9}$/i.test(self.mobile))) return self.$util.Tips({
					title: '请输入正确的手机号码！'
				});
				qrcode_become_service({
					realname: self.realname,
					mobile: self.mobile,
					qrcode: self.qrcode,
				}).then(res => {
					console.log('请求成功', res);
					self.$util.Tips({
						title: '申请成功'
					});
					setTimeout(function(){
						uni.switchTab({
							url: '/pages/index/index'
						})
					},1000)
				}).catch(err => {
					// console.log('请求失败', err);
					self.$util.Tips({
						title: err
					});
				})
			}
		}
	}
</script>

<style lang="less">
	.header {
		width: 100%;
		height: 348rpx;

		image {
			display: block;
			width: 100%;
			height: 100%;
		}
	}

	.apply {
		width: 720rpx;
		background-color: #FFFFFF;
		padding: 60rpx 48rpx;
		border-radius: 30rpx;
		box-shadow: 0 0 6rpx #DDDDDD;
		position: absolute;
		top: 298rpx;
		left: 15rpx;
		z-index: 5;

		.title {
			font-size: 38rpx;
			color: #1B1B1B;
			line-height: 1;
			margin-bottom: 50rpx;
			font-weight: 600;
		}

		input {
			width: 100%;
			height: 90rpx;
			background: #f6f6f6;
			border-radius: 10rpx;
			margin-bottom: 48rpx;
			padding: 0 30rpx;
			font-size: 30rpx;
			line-height: 90rpx;
			color: #2D2D2D;
		}

		.apply-submit {
			width: 414rpx;
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 82rpx;
			text-align: center;
			margin: 80rpx auto 40rpx;
			background-color: #dd4134;
			border-radius: 82rpx;
		}
	}
</style>
